<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 事件修饰符：
    修饰符是对某条指令的补充
        .stop:阻止事件传播
        .capture:让当前的事件在捕获的阶段执行
        .prevent:阻止默认事件
        .self:只有事件真正发生在自己身上的时候才会触发
        .once:一次性事件
        .enter:按键修饰符-回车键
        ... 其他按钮修饰符
    -->
    <div id="app">
        <div @click.self="myAlert('outer')">
            outer
            <div @click.capture="myAlert('inner')">
                inner
                <div @click="myAlert('content')">content</div>
            </div>
        </div>

        <form action="###">
            <button @click.prevent.once="myAlert('点击了按钮')">按钮</button>
        </form>

        <input type="text" @keyup.enter="myAlert('敲击键盘')" />
        <input type="text" @keyup.13="myAlert('敲击键盘')" />
    </div>
</body>

</html>
<script src="../../../vue.js"></script>
<script>
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: "#app",
        data() {
            return {};
        },
        methods: {
            myAlert(mes) {
                alert(mes);
            },
        },
    });
</script>